<template>
	<view class="page">
		<view class="header" v-if="teacher_course.teacher">
			<view class="h-top dis-flex  flex-y-center">
				<view class="icon">
					<image :src="teacher_course.teacher.headeravatar" mode="aspectFill" lazy-load></image>
				</view>
				<view class="info">
					<view class="name f_32">{{teacher_course.language_grade}}{{teacher_course.language}}{{teacher_course.teacher.nickname}}</view>
					<view class="detail f_24">{{teacher_course.language_grade}}{{teacher_course.language}} 教龄<text>{{teacher_course.teacher.teaching_year}}年</text>  已授<text>{{teacher_course.teacher.course_count}}课</text></view>
				</view>
			</view>
			<view class="h-bottom">
				<view class="h-b-title f_28">评价标签</view>
				<view class="tag-box dis-flex">
					<view v-for="(item,index) in tagList" @click="change_status(index)" :key="index" :class="item.status?'active nowrap':'default nowrap'">
						{{item.tag_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="teacher_course.teacher">
			<view class="c-title f_32">效果满意度</view>
			<view class="comment_status dis-flex">
				<image v-for="(item,index) in 5" :key="index" :src="index<result?imgPrefix('/static/image/icon/comment_status_1.png'):imgPrefix('/static/image/icon/comment_status_0.png')" mode="" @click="resultStatus(index)" lazy-load></image>
			</view>
			<view class="c-title f_32">服务满意度</view>
			<view class="comment_status dis-flex">
				<image v-for="(item,index) in 5" :key="index" :src="index<service?imgPrefix('/static/image/icon/comment_status_1.png'):imgPrefix('/static/image/icon/comment_status_0.png')" mode="" @click="serviceStatus(index)" lazy-load></image>
			</view>
			  <view class="uni-textarea">
					<textarea placeholder-style="color:#8f8f9a" v-model="textareaValue" class="f_26" placeholder="对老师、教学方式不满意？可描述问题，帮助老师改善。"/>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn f_32 dis-flex flex-y-center flex-x-center" @click="submit">
				提交
			</view>
		</view>
		
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import API from '@/static/api/index.js';
const app = getApp();
export default {
	mixins: [commonMixinFun],
	name: 'index',
	data(){
		return{
			course_order_id:'',//订单id
			result:0,//效果满意度
			service:0,//服务满意度
			textareaValue:'',//评论内容
			teacher_course:{},//教师信息
			tagList:[]
		}
	},
	onLoad(options) {
		this.course_order_id=options.course_order_id
		this._commentRead()
	},
	methods:{
		_commentRead(){
			API.commentRead(this.course_order_id).then(res=>{
				if(res.code==1){
					let {tag,course_order} = res.data
					 for(let index in tag){
						 tag[index].status=false
					 }
					this.tagList=tag
					this.teacher_course=course_order
				}
			})
		},
		//效果满意度选择的星星
		resultStatus(index){
			app._log(index)
			this.result=index+1
		},
		//服务满意度选择的星星
		serviceStatus(index){
			app._log(index)
			this.service=index+1
		},
		//提交
		submit(){
			let tag = ''
			for (let i = 0; i < this.tagList.length; i++) {
				if(this.tagList[i].status){
					tag+=tag!=''?","+this.tagList[i].tag_name:this.tagList[i].tag_name
				}
			}
			let obj={
				course_order_id:this.course_order_id,//订单id
				result_score:this.result,//效果评分
				service_score:this.service,//	服务评分
				content:this.textareaValue,//内容
				tag:tag
			}
			if(tag!=''){
				if(this.result<1||this.service<1){
					this.showToast('评分不能小于一个星星','none')
				}else{
					if(this.textareaValue!=''){
						//提交评论接口
						this._createComment(obj)
					}else{
						this.showToast('评论内容不能为空','none')
					}
				}
			}else{
				this.showToast('必须选择一个评价标签哦','none')
			}
				
		},
		_createComment(obj){
			app._log(obj)
			API.createComment(obj).then(res=>{
				if(res.code==1){
					this.showToast('评论成功','success')
					setTimeout(()=>{
						this.pageTo('/pages/order_detail/index',{orderId:this.course_order_id},'redirect')
					},2000)
				}else{
					this.showToast(res.msg,'none')
				}	
			}).catch(err=>{
				this.showToast(err,'none')
			})
		},
		//改变标签状态
		change_status(index){
			this.tagList[index].status=!this.tagList[index].status
		}, 
	}
}
</script>

<style  lang="scss" scoped>
page{
	background: #f7f7f7;
}
.btn-box{
	position: fixed;
	width: 654rpx;
	bottom: 0;
	padding-bottom: calc(52rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(52rpx + env(safe-area-inset-bottom));
}
.btn{
	line-height: 92rpx;
	background-image: linear-gradient(270deg, 
		#9254ff 0%, 
		#7f4aff 100%);
	border-radius: 24rpx;
	color: white;
}
.page{
	padding: 24rpx 48rpx;
	.content{
		margin-top: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx 
			rgba(37, 39, 72, 0.03);
		border-radius: 16rpx;
		.c-title{
			color: #252748;
			padding: 24rpx;
		}
		.comment_status{
			padding: 0  24rpx 0rpx 24rpx;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 24rpx; 
			}
		}
		.uni-textarea{
			padding: 24rpx;
		}
		textarea{
			background-color: #fafafa;
			border-radius: 8rpx;
			padding: 16rpx;width: 100%;
		}
	}
	.header{
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx 
			rgba(37, 39, 72, 0.03);
		border-radius: 16rpx;
		background: white;
		.h-top{
			margin:0 24rpx;
			padding: 24rpx 0;
			border-bottom: 1px solid #ededed;
			.icon{
				image{
					width: 96rpx;
					height: 96rpx;
				}
				margin-right: 16rpx;
			}
			.info{
				.name{
					color: #252748;
					margin-bottom: 10rpx;
				}
				.detail{
					color: #8f8f9a;
					text{
						color: #252748;
						margin-right: 30rpx;
					}
				}
			}
		}
		.h-bottom{
			.h-b-title{
				color: #252748;
				padding: 18rpx 24rpx;
			}
			.nowrap{
				white-space: nowrap;
				margin-right: 24rpx;
				font-size: 26rpx;
				border-radius: 8rpx;
				padding: 12rpx 16rpx;
			}
			.tag-box{
				flex-wrap:wrap;
				margin-left: 24rpx;
				.default{
					color: #8f8f9a;
					background-color: #f7f7f7;
					margin-bottom: 24rpx;
				}
				.active{
					color: #7f4aff;
					background-color: rgba(127, 74, 255, 0.08);
					margin-bottom: 24rpx;
				}
			}
		}
	}
}
</style>
